<template>
	<view>
		<uni-popup ref="complaint" type="bottom">
			<view class="toast_center">
				<view class="title across">
					<view class="label">反馈与意见</view>
					<!-- <image src="../static/images/img/window_close.png"></image> -->
					<view class="close" @click="closeMask"></view>
				</view>
				<view class="radio_list">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd across" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio color='#FF3D3D' :value="item" :checked="item === current" />
							</view>
							<view class='name'>{{item}}</view>
						</label>
					</radio-group>
				</view>
				<textarea :value="content" @input='setContent' placeholder="请描述问题,我们尽量满足(选填)" />
				<view class="subBtn" @click="subBtn">提交</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"complaint",
		data() {
			return {
				items:[
					'视频播放不流畅，观看体验差',
					'内容太过陈旧',
					'内容是重复的'
				],
				current: '视频播放不流畅，观看体验差',
				content: ''
			};
		},
		props:[
			'cid'
		],
		methods:{
			setContent(e){
				this.content = e.detail.value
			},
			open(){
				console.log('chufa')
				this.$refs.complaint.open('bottom')
			},
			radioChange(e){
				this.current = e.detail.value
			},
			subBtn(){
				this.$http.video_feedback({
					videoid:this.cid,
					title: this.current,
					content: this.content 
				}).then(res=>{
					uni.showToast({
						title: res.mess,
						icon:'none',
						duration:1500
					})
					this.closeMask()
				}).catch(err=>{
					
				})
			},
			closeMask(){
				this.$refs.complaint.close()
			}
		}
	}
</script>

<style lang="less">
	.toast_center{
		background-color: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-bottom: 15rpx;
		.uni-list-cell{
			display: flex;
			height: 88rpx;
			align-items: center;
			margin-left: 3vw;
			.name{
				font-size: 30rpx;
				color: #333;
				margin-left: 15rpx;
			}
		}
		.title{
			display: flex;
			width: 94vw;
			margin: 20rpx 3vw 0rpx;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx 0;
			position: relative;
			view{
				color: #333333;
				font-size: 36rpx;
			}
			
			.close {
			  position: absolute;
			  right: 0rpx;
			  top: 10px;
			  width: 32px;
			  height: 32px;
			}
			.close:before, .close:after {
			  position: absolute;
			  left: 15px;
			  content: ' ';
			  height: 22px;
			  width: 2px;
			  background-color: #333;
			}
			.close:before {
			  transform: rotate(45deg);
			}
			.close:after {
			  transform: rotate(-45deg);
			}
		}
	}
	textarea{
		height: 300rpx;
		background-color: #f5f5f5;
		border-radius: 15rpx;
		width: 94vw;
		margin: 20rpx 3vw;
		padding: 15rpx;
		box-sizing: border-box;
	}

	.subBtn{
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		height: 88rpx;
		width: 94vw;
		margin: 20rpx 3vw 0;
		
		background-color: #ff3d3d;
		border-radius: 5rpx;
	}
</style>
